<template>
  <div class="reg">

    <div class="login-from">
      <div class="list">
        <input type="tel" class="txt" v-model="phone" placeholder="请输入您手机号" />
      </div>
      <div class="list clearfix">
        <div class="fl">
          <input type="text" class="txt" v-model="yzm" placeholder="请输入验证码" />
        </div>
        <div class="fr">
          <mt-button type="danger" size="large" v-on:click="sendcodeFn" :disabled="disabled">{{vsecond}}</mt-button>
        </div>
      </div>
      <div class="list clearfix">
        <input type="text" v-if="showpass" class="txt" v-model="password" placeholder="请输入6-20位密码" />
        <input type="password" v-else class="txt" v-model="password" placeholder="请输入6-20位密码" />

        <i class="ico show" v-if="showpass" v-on:click="hide"><img src="../assets/show.png" alt=""></i>
        <i class="ico hide" v-else v-on:click="show"><img src="../assets/hide.png" alt=""></i>
      </div>
    </div>

    <div class="error-msg">{{errorMsg}}</div>

    <div class="next-btn">
      <mt-button type="danger" size="large" v-on:click="loginFn">注册</mt-button>
    </div>
    <div class="tip">注册代表您已同意《女神有财使用协议》</div>

  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    name: 'Reg',
    data () {
      return {
        phone:'',
        yzm:'',
        password:'',
        errorMsg:'',
        disabled: false,
        second:60,
        vsecond:'获取验证码',
        showpass:false
      }
    },
    methods:{
      show:function(){
        this.showpass = true;
      },
      hide:function(){
        this.showpass = false;
      },
      send: function () {

        this.disabled = true;
        var vm = this;
        vm.second = 60;
        var timer = null;
        vm.vsecond = vm.second + '秒后重新发送'
        timer = setInterval(function(){
          if(vm.second<=0){
            vm.vsecond = '获取验证码';
            vm.disabled = false;
            clearInterval(timer);
            return;
          }
          vm.second = vm.second - 1;
          vm.vsecond = vm.second + '秒后重新发送'

        },1000)

      },
      sendcodeFn:function(){

        if(this.phone == ''){
          this.errorMsg = '手机号不能为空';
          return;
        }

        if(!utilities.isMobile(this.phone)) {
          this.errorMsg = '请输入正确的手机号'
          return;
        }
        else{
          this.errorMsg = '';
        }

        var sendcodeData = {};
        sendcodeData.phone = this.phone;
        var _this = this;
        $.ajax({
          type:'post',
          url: RouteMap.sendcode,
          data: sendcodeData,
          success:function(res){
            if(res.code == 200){
              Toast(res.msg);
              _this.send();
            }
            else{
              Toast(res.msg)
            }
          }
        })
      },
      loginFn:function(){

        if(this.phone == ''){
          this.errorMsg = '手机号不能为空';
          return;
        }

        if(this.yzm == ''){
          this.errorMsg = '验证码不能为空';
          return;
        }
        if(this.password == ''){
          this.errorMsg = '密码不能为空';
          return;
        }

        if(!utilities.isMobile(this.phone)) {
          this.errorMsg = '请输入正确的手机号'
          return;
        }
        else{
          this.errorMsg = '';
        }

        if(!utilities.isSmsCodeValid(this.yzm)){

          this.errorMsg ='短信验证码有误';
          return;
        }
        else{
          this.errorMsg ='';
        }
        if(!utilities.isPasswordValid(this.password)){
          this.errorMsg = '请输入6-20位密码';
          return;
        }
        else{
          this.errorMsg = ''
        }
        this.errorMsg = '';


        var regData = {};
        regData.phone = this.phone;
        regData.password = this.password;
        regData.verify = this.yzm;
        regData.openid = localStorage.openid || '';

        var _this = this;


//        axios({
//          method: 'POST',
//          url: RouteMap.reg,
//          data: regData
//        })
//        .then(function (res) {
//          //console.log(res.data);
//          if(res.data.code == 200){
//
//            var userData = res.data;
//            userData.login = "1";
//
//            sessionStorage.setItem('user',JSON.stringify(userData));
//
//            if(_this.$route.query.redirect != '' && _this.$route.query.redirect != undefined){
//              _this.$router.push({path:''+_this.$route.query.redirect});
//            }
//            else{
//              _this.$router.push({path:'/'});
//            }
//
//          }
//          else{
//            Toast(res.data.msg)
//          }
//
//        })
//        .catch(function (error) {
//          console.log(error);
//        });

        $.ajax({
          type:'post',
          url: RouteMap.reg,
          data: regData,
          success:function(res){
            if(res.code == 200){

              var userData = res.data;
              userData.login = "1";
              userData.phone = _this.phone;
              sessionStorage.setItem('user',JSON.stringify(userData));

              if(_this.$route.query.redirect != '' && _this.$route.query.redirect != undefined){
                _this.$router.push({path:''+_this.$route.query.redirect});
              }
              else{
                _this.$router.push({path:'/'});
              }

            }
            else{
              Toast(res.msg)
            }
          }
        })

      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .reg{
    padding-top: 2rem;
  }
  .form-tt{
    font-size: .6rem;
    color: #b2b2b2;
    text-align: center;
    padding: 1.4rem 0 1.2rem;
  }
  .form-tt span{
    padding: 0 1rem;
  }
  .form-tt .active{
    color: #36231d;
  }
  .form-tt a{
    color: #b3b3b3;
  }
  .list{
    padding:0 1.2rem;
    margin-bottom: .7rem;
    position: relative;
  }
  .txt{
    background: #f2f2f2;
    border-radius: 1rem;
    padding: .2rem .8rem;
    width: 12rem;

    font-size: .5rem;
  }
  .fl .txt{
    width: 5rem;
  }
  .btn{
    background: red;
    width: 4rem;
    height: 1.5rem;
    display: inline-block;
    border-radius: 1rem;
  }

  .mint-button--danger{
    border-radius: 1rem;
    padding: 0 .8rem;
  }
  .tip{
    text-align: center;
    font-size: .5rem;
    color: #808080;
    padding-top: .5rem;
  }
  .next-btn{
    padding: 0 1rem;
  }
  .ico{
    position: absolute;
    right: 1.8rem;
    top: .55rem;
  }
  .ico img{
    width: .8rem;
  }
  .from-box{ padding: .67rem; padding-top: 3.33rem; }
  .btn-box{ padding-top: 1rem; }

</style>
